require(['config'], function() {
  require(['jquery', 'swiper', 'template', 'loadHF', 'jquery.cookie', 'jquery.fly'], function($, Swiper, template) {
    /* 创建 Swiper 对象实例，实现轮播图效果 */
    new Swiper('.swiper-container', {
      loop: true, // 循环模式选项
      autoplay: true, // 自动轮播切换
      // 如果需要分页器
      pagination: {
        el: '.swiper-pagination',
      },
      // 如果需要前进后退按钮
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    })

    /* 查询推荐商品数据，并渲染 */
    $.getJSON('http://www.xiongmaoyouxuan.com/api/tab/1', resData => {
      // console.log('获取到数据：', resData)
      // 获取返回数据中表示推荐商品的数组
      const _products = resData.data.items.list
      // console.log('推荐商品：', _products)
      // 根据推荐商品的数组来渲染模板
      const html = template('hot-template', {products: _products})
      // console.log('渲染后：', html)
      // 添加到 DOM 树中
      $('.hot').append(html)
    })
    
    $.ajax({
      url: 'http://39.100.138.164:38080/app/mock/48/api/hot',
      method: 'GET',
      data: { start: 0 },
      dataType: 'json',
      success: resData => {
        console.log('请求成功：', resData)
        const _products = resData.data.list
        const html = template('hot-template', {products: _products})
        $('.hot').append(html)
        // $('.hot').html(html)
      }
    })

    $.getJSON('/mock/hot.json', resData => {
      const _products = resData.data.list
      const html = template('hot-template', {products: _products})
      $('.hot').append(html)
    })

    /* 添加购物车：为按钮绑定点击事件--利用事件委派 */
    $('.hot').on('click', '.add-to-cart', e => {
      // 获取当前按钮所在的 li 节点
      const $li = $(e.target).parents('.hot-item')
      // 在 li 节点中查找后代节点，构建商品对象
      // 构建当前选购商品的对象
      const curr = {
        id: $li.data('id'), // 获取在 li 节点上自定义 id 属性(data-id)的值
        title: $li.children('.title').html(),
        price: $li.find('.price').text(),
        image: $li.find('.image').attr('src'),
        amount: 1
      }
      // 配置，保存或读取cookie时，自动实现JSON转换
      $.cookie.json = true
      // 从 cookie 中读取已有保存的购物车数组数据
      const cart = $.cookie('cart') || []
      // 判断购物车数组中是否存在当前选购的商品，
      // 如果存在，则修改数量即可。不存在则添加到数组中
      const index = cart.findIndex(prod => prod.id === curr.id)
      if (index !== -1) { // 存在已选购的当前商品
        cart[index].amount += 1
      } else { // 不存在当前选购的商品，则添加到数组中
        // 将当前选购商品保存到 cart 数组中
        cart.push(curr)
      }
      // 将购物车数组保存到 cookie 中
      $.cookie('cart', cart, {expires: 70})

      // 添加抛物线效果
      const {top, left} = $('.cart').offset()
      $(`<img src="${curr.image}" style="width: 32px; height: 32px; z-index: 999"/>`).fly({
        start: {
          top: e.clientY,
          left: e.clientX
        },
        end: {
          left,
          top: top - $(document).scrollTop(),
          width: 10,
          height: 10
        },
        onEnd() {
          this.destroy()
        }
      })
    })
  })
})
